<template>
  <div class="select-status">
    <heard />
    <div class="select-status-body">
      <div class="body-box">
        <div class="left" />
        <div class="right">
          <div class="tip">
            <span>Choose your login method</span>
            <span>(选择你的登录方式)</span>
          </div>
          <div class="login-method">
            <div class="method">
              <div class="img-box" />
              <div class="method-name">
                <span>Tourists</span>
                <span>(游客)</span>
              </div>
            </div>
            <div class="method zhuce">
              <div class="img-box" @click="loginMethod('Register')" />
              <div class="method-name">
                <span>Register</span>
                <span>(注册)</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'

const router = useRouter()
function loginMethod(type: 'Register' | 'Tourists') {
  switch (type) {
    case 'Register':
      router.push('/register')
      break
  }
}
</script>

<style lang="scss" scoped>
 .select-status{
  display: flex;
  flex-direction: column;
  height: 100%;

  .select-status-body{
    width: 100%;
    height: calc(100% - 70px);
    display: flex;
    align-items: center;
    justify-content: center;
     background-color: #F4F9FD;
    .body-box{
      display: flex;
      width: 85%;
      height: 770px;

      // background-color: aqua;
      .left{
        width: 50%;
        background: url("@/assets/pic/loginMethodLeft.png") no-repeat;
        background-size: 100% 100%;
      }
      .right{
        width: 50%;
        display: flex;
        flex-direction: column;
        padding-top: 119px;
        box-sizing: border-box;
        background-color: white;
        // justify-content: center;
        .tip{
          display: flex;
          flex-direction: column;
          align-items: center;
          color: #0a1629;
          font-size: 21px;
          font-weight: 400;
          margin-bottom: 90px;
        }
        .login-method{
          display: flex;
          justify-content: space-around;
          .method{
            display: flex;
            flex-direction: column;
            .img-box{
              cursor: pointer;
              width: 200px;
              height: 200px;
              background: url("@/assets/pic/youke.png") no-repeat;
              background-size: 100% 100%;
            }
            .method-name{
              margin-top: 40px;
              display: flex;
              flex-direction: column;
              align-items: center;
              &>span{
                columns: #0A1629;
                font-size: 21px;
                font-weight: 400;
              }
            }
          }
          .zhuce{
            .img-box{
              background: url("@/assets/pic/zhuce.png") no-repeat;
              background-size: 100% 100%;
            }
          }
        }
      }
    }
  }
 }
</style>
